<template>
	<view class="OperaCollection-container">
		<uni-popup mask-background-color="rgba(0,0,0,0.4)" ref="popup" type="bottom">
			<view style="padding: 10px;background: #ffffff;border-top: 10px;">
				<view class="flex-col" style="padding-top: 10px;padding-bottom: 10px;border-bottom: 1px solid #c8c7cc;margin-bottom: 10px;" >
					<text class="uifont" style="font-weight: 700;font-size: 18px;">{{operaInfo.name}} ,{{opera_collection_id}}</text>
					<text class="uifont" style="font-size: 12px;color: $C0C4CC;margin-top: 5px;">更新至第{{operacollectionList.total}}集</text>
				</view>
				
				<view class="grid-container" style="width: 100%;">
					<scroll-view scroll-y style="height: 35vh;width: 100%;">
						<view class="justify-start" style="flex-wrap: wrap;width: 100%;">
							<template v-if="operacollectionList&&operacollectionList.total">
								<view class="" v-for="(item,index) in operacollectionList.data" :key="index" style="width: 30%;position: relative;height: 170px;border-radius: 10px;margin: 0 1.5%;margin-bottom: 10px;">
									<image @click="goPlay(item)" :src="baseURL+'/'+operaInfo.logo_img" mode="" style="position: absolute;width:100%;height: 100%;border-radius: 10px;z-index: 1;"></image>
									<view v-if="item.sort_num>operaInfo.free_num&&item.is_pay==0" @click="openPay(item)" class="justify-center align-center flex-col" style="position: absolute;background-color: rgba(0, 0, 0, 0.3);height: 100%;width: 100%;z-index: 2;border-radius: 10px;">
										<text class="myicon icon-jiesuo" style="font-size: 35px; color: #ffffff;"></text>
										<text style="font-size: 14px; color: #ffffff;">{{operaInfo.v_money}}币</text>
									</view>
									
									<view style="position: absolute;background-color: rgba(0, 0, 0, 0.3);width: 100%;bottom: 0;text-align: center;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;z-index: 3;color: #ffffff;">第{{item.sort_num}}集</view>
								</view>
							</template>
							
						</view>
					</scroll-view>
					
				</view>
			</view>
		</uni-popup>
		
		<PayConfirm ref="pay-confirm" :opera_id="opera_id" :opera_collection_id="opera_collection_id"></PayConfirm>
	</view>
</template>

<script>
	import PayConfirm from '@/pages/opera/components/PayConfirm.vue'
	
	export default {
		name: "OperaCollection",
		components:{
			PayConfirm,
		},
		props:{
			opera_id:{
				type:Number,
				default:0
			},
			opera_collection_id:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				baseURL:this.baseURL,
				operaInfo: null,
				operacollectionList: null,
				userInfo: {}
			}
		},
		created() {
			this.get('crud/detail',{table:'opera', table_id: this.opera_id}).then(({code,detail})=>{
				if(code==1){
					this.operaInfo=detail
				}
			})
			this.get('operacollection/index',{limit:1000, opera_id: this.opera_id}).then(({code,paginate})=>{
				if(code==1){
					this.operacollectionList=paginate
				}
			})
			// 用户
			this.get('user/user_info').then(({code,user_info})=>{
				if(code==1){
					this.userInfo=user_info
				}
			});
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			goPlay(operacollection){
				// console.log('operacollection',operacollection)
				if(operacollection.is_pay || operacollection.sort_num<=this.operaInfo.free_num ){
					this.redirect('/pages/opera/video/play?opera_id='+operacollection.opera_id+'&opera_collection_id='+operacollection.opera_collection_id)
				}
			},
			openPay(operacollection) {
				console.log(this.userInfo,this.operaInfo,operacollection)
				if(this.userInfo.v_money*1 < this.operaInfo.v_money*1){
					this.$refs['pay-confirm'].open()
				}else{
					this.post('feelog/save', {
						vmoney: this.operaInfo.v_money*1,
						opera_id: operacollection.opera_id,
						opera_collection_id: operacollection.opera_collection_id,
					}).then(({code})=>{
						if(code==1){
							this.success('购买成功');
							this.redirect('/pages/opera/video/play?opera_id='+operacollection.opera_id+'&opera_collection_id='+operacollection.opera_collection_id, 1200)
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.OperaCollection-container {
	z-index: 9999;
	background: #ffffff;
	width: 750rpx;
	border-radius: 32rpx 32rpx 0 0;
	box-sizing: border-box;
	padding: 24rpx;
}
</style>